window.addEventListener('load', () => {
    //获取变量
    const main = document.querySelector('.main')
    const icon = document.querySelector('.section .icon')
        //获取当前商品的id
    var id = /id=(\d+)/.exec(location.search)
        //判断id是否提取到，没有就跳到列表页
    if (!id) {
        alert('非法进入！！！ ')
        location.href = './list.html'
    }
    //获取用户id
    const uid = cookie('uname')
    if (uid) {
        //登陆了
        //显示用户信息
        var str = `
                <li title="联系我们">
                        <img src="./images/phone.png" width="30">
                        </li>
                        <li title="购物车">
                            <img src="./images/cart.png" width="30">
                        </li>
                        <li title=用户">
                           <div style="padding-top:10px;box-sizing:border-box;margin:0 10px">欢迎<span style="color:#0199D5;font-size:"18px">${uid}</span>用户</div>
                        </li> 
                        <li title=注销"  style="padding-top:10px;box-sizing:border-box;" class='exit'><a>注销</a></li>    
                `
        icon.innerHTML = str
            //退出登陆事件
        getExit()
    }
    //获取到id通过id获取当前商品信息
    promiseAjax({
            url: './json/daierData.json',
        }).then(res => {
            for (var i = 0; i < res.length; i++) {
                if (res[i].pid == id[1]) {
                    var str = `
             <div class="left">
            <div class="box">
                <h2 class="tit">惠普(HP) ${res[i].pstitle} ${res[i].monitor}笔记本电脑 (${res[i].win}/${res[i].Memory})</h2>
                <img src="https:${res[i].psimg}" width="100%">
            </div>
        </div>
        <div class="right">
            <div class="box">
                <table>
                    <tr>
                        <td>
                            <img src="./images/logo2.png">
                        </td>
                        <td>
                            <img src="./images/logo2.png">
                        </td>
                    </tr>
                    <tr>
                        <td>Windows 10 Home 64</td>
                        <td>${res[i].monitor}</td>
                    </tr>
                </table>
            </div>
            <div class="color">
                <p>颜色：</p>
                <div class="col">
                    <aside></aside>
                    <aside style="color:${res[i].bcolor};"></aside>
                </div>
            </div>
            <div class="include">
                <p>包含：</p>
                <div class="in">
                    <aside>
                        <img src="https://media.hpstore.cn/catalog/product/cache/e0bd5efef78fc56dd78ccf66b83d6a45/4/q/4qm77_-_1_.png" width="80%">
                    </aside>
                </div>
            </div>
            <div class="price">
                <p>
                    <span>厂商指导价&nbsp; <del>${res[i].yuanjia}</del></span>
                    <span style="color:#0199D5 ;"> &nbsp;低至 <span style="color: black;font-size: 25px;"> ${res[i].price}</span></span>
                </p>
                <p>节省了<span style="color: red;">&nbsp;${res[i].zhekou}</span></p>
            </div>
            <button class="addCart">加入购物车</button>
            <div class="huo">
                <p>商品库存
                    <span style="margin-left: 20px;"><img src="./images/transport.png"></span>
                </p>
                <p>
                    <aside style="color: #0199D5;">有货</aside>
                    <aside style="line-height: 20px;">优先选择顺丰发货,预计到货时间2-3天。如果顺丰不支持配送,将选择EMS发货,预计到货时间3-4天</aside>
                </p>
            </div>
            <div class="info">
                <p>
                    日常销售价${res[i].yuanjia}，抢购价${res[i].price} </p>
                <p>
                    国庆优惠价，限时限量抢购！ </p>
                <p>
                    订单送有线包鼠套装（4QM76PA），赠品会随主机一起配送 </p>
                <p>
                    赠品数量有限，先到先得，以实物为准；一个账户限享一份赠品；若退货，请务必将赠品随电脑一并寄回。 </p>
                <p>
                    欢迎致电400-820-1015热线或在线咨询客户代表了解更多产品详情和优惠信息 </p>
            </div>
        </div>
            `
                        //渲染到页面
                    main.innerHTML = str
                    getCart(res)
                }
            }
        })
        //点击添加购物车按钮的事件
    function getCart(res) {
        const adds = document.querySelectorAll('.addCart')
        for (let i = 0; i < adds.length; i++) {
            adds[i].onclick = function() {
                //判断是否登陆 - 没有 跳到登录页，- 有，继续
                if (!uid) { //没有登录
                    alert('您还没有登录，请先登录！')
                    location.href = './login.html'
                } else {
                    //登陆了
                    //先获取本地存储中的数据 - 给里面添加数据
                    var str = localStorage.getItem('data')
                        //arr是用来放添加的数据，放在arr这个空数组里
                    var arr = []
                        //定义当前数据，放在obj对象中
                    var obj = {
                            id: id[1],
                            num: 1,
                        }
                        //判断本地存储中有没有数据,有就追加到数组中
                    if (str) {
                        arr = JSON.parse(str)
                            //判断本地存储中是否有当前这条数据
                        var ele = arr.find(item => item.id == id)
                        if (ele) {
                            //ele的num改了，arr中有一条数据的num就改了 - 和obj没有关系了
                            //将修改过的ele存到本地存储中就ok
                            ele.num += 1
                            localStorage.setItem('data', JSON.stringify(arr))
                            return false
                        } else {
                            obj.num = 1
                        }
                    }
                    arr.push(obj)
                        //存储当前数据到本地存储中
                    localStorage.setItem('data', JSON.stringify(arr))
                        //跳转到cart页面，将相应的id作为参数传过去
                    alert('添加成功！！！')
                    location.href = './cart.html'
                }
            }
        }
    }
    //退出登录的方法
    function getExit() {
        const exit = document.querySelector('.exit')
        exit.onclick = function() {
            location.href = './home.html'
        }
    }
})